<template>
  <div class="question_container">
    <el-row :gutter="24">
      <el-col class="header_col" :sm="22">
        <el-card>
          <h2>
            距离考试结束还有:
            <span style="color: red">{{ m }}分钟{{ s }}秒</span>
          </h2>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-affix :offset="10">
          <el-card class="box_card">
            <p class="card_title">答题状态</p>

            <el-row :gutter="24" class="card-line" style="padding-left: 10px">
              <el-tag
                effect="dark"
                class="card_tag"
                style="width: 50px"
                type="info"
                >未答</el-tag
              >
              <el-tag effect="dark" class="card_tag" type="success"
                >已答</el-tag
              >
              <el-tag effect="dark" class="card_tag" type="danger">选中</el-tag>
            </el-row>

            
            <div v-if="paperSort.singleChoice !== undefined && paperSort.singleChoice.length > 0">
              <p class="card_title">单选题</p>
              <el-row :gutter="24" class="card-line">
                <el-col>
                  <el-tag 
                  v-for="(item,index) in paperSort.singleChoice"
                  :key="index"
                  :type="tagType(item)"
                  effect="dark" 
                  style="margin-right: 10px"
                    >{{ item }}</el-tag
                  >
                </el-col>
              </el-row>
            </div>

            
            <div v-if="paperSort.multipleChoice !== undefined && paperSort.multipleChoice.length > 0">
              <p class="card_title">多选题</p>
              <el-row :gutter="24" class="card-line">
                <el-col>
                  <el-tag 
                  v-for="(item,index) in paperSort.multipleChoice"
                  :key="index"
                  :type="tagType(item)"
                  effect="dark" 
                  style="margin-right: 10px"
                    >{{ item }}</el-tag
                  >
                </el-col>
              </el-row>
            </div>

            <div v-if="paperSort.judgment !== undefined && paperSort.judgment.length > 0">
              <p class="card_title">判断题</p>
              <el-row :gutter="24" class="card-line">
                <el-col>
                  <el-tag 
                  v-for="(item,index) in paperSort.judgment"
                  :key="index"
                  :type="tagType(item)"
                  effect="dark" 
                  style="margin-right: 10px"
                    >{{ item }}</el-tag
                  >
                </el-col>
              </el-row>
            </div>
            

            <p style="color: red">
              <i class="el-icon-timer"></i>
              {{ m }}分{{ s }}秒
            </p>
          </el-card>
        </el-affix>
      </el-col>

      <el-col :span="16">
        <el-card
          v-for="(item, index) in questions"
          :key="index"
          class="box_card_exam"
        >
          <!-- 这里是题目 -->
          <template #header>
            <div v-if="item.type == 0">
              <el-tag size="small">{{ type[item.type] }}</el-tag>
            </div>

            <div v-if="item.type == 1">
              <el-tag size="small">{{ type[item.type] }}</el-tag>
            </div>

            <div v-if="item.type == 2">
              <el-tag size="small">{{ type[item.type] }}</el-tag>
            </div>

            <div :model="questionNumber = index+1" class="card-header">
              <!-- 题号 -->
              <p>{{ index + 1 }}. {{ item.name }}</p>
            </div>
          </template>

          <!-- 具体的试题 -->
          <div v-for="(itemOptions, indexOptions) in item.options"
                  :key="indexOptions">
            <!-- type为1就是单选 -->
            <p v-if="item.type == 1">
              <el-radio-group v-model="radioValue" @change="handSave(index+1, itemOptions.option)">
                <p style="margin-bottom: 30px">
                    <!-- 行了，把itemOptions当key就行了 -->
                  <el-radio :label="itemOptions.option">
                      {{ options[indexOptions] }}.
                      {{ itemOptions.option }}
                  </el-radio>
                </p>
              </el-radio-group>
            </p>

            <!-- type为2就是多选 -->
            <p v-if="item.type == 2">
              <el-checkbox-group v-model="multipleValue" @change="handSave(index+1,itemOptions.optinon)">
                <p style="margin-top: 5px">
                  <el-checkbox :label="itemOptions.option">
                      {{ options[indexOptions] }}.
                      {{ itemOptions.option }}</el-checkbox>
                </p>
              </el-checkbox-group>
            </p>

            <p v-if="item.type == 0">
                <el-radio v-model="radio[index]" :label="itemOptions">
                    {{ options[indexOptions] }}.
                    {{ itemOptions }}
                </el-radio>
            </p>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //试卷详情
      paperDetails: {
        name: "",
        teacher: "",
        createTime: "2020-10-12 10:20:30",
        examTime: 60 * 30, //时间
        difficulty: "", //难度
        totalScore: "", //总分
        passScore: "", //及格分数
        info: "",
      },
      //对应试卷id的所有试题
      questions: [
        {
          name: "1+1等于？",
          type: 1,
          options: [
            {option:"1"},
            {option:"2"},
            {option:"3"},
            {option:"4"},
          ],
        },
        {
          name: "1+2等于？",
          type: 1,
          answer:"12",
          options: [
            {option:"10"},
            {option:"20"},
            {option:"30"},
            {option:"40"}, 
          ],
        },
        {
          name: "1+1等于？",
          type: 1,
          answer:"11",
          options: [ 
            {option:"1"},
            {option:"2"},
            {option:"3"},
            {option:"4"},
          ],
        },
        {
          name: "1+7等于？",
          type: 2,
          options: [ 
            {option:"111"},
            {option:"2111"},
            {option:"q"},
            {option:"4111"}, 
          ],
        },
        {
          name: "1+7等于等于？",
          type: 2,
          options: [ 
            {option:"1111"},
            {option:"211"},
            {option:"312"},
            {option:"4213"}, 
          ],
        },
        {
          name: "1+7等于1",
          type: 0,
          options: [ "正确","错误" ],
        },
        {
          name: "1+7等于2",
          type: 0,
          options: [ "正确","错误" ],
        },
      ],
      //把1.2.3.4渲染成ABCD
      options: ["A", "B", "C", "D","E","F","G"],
      type: ["判断题", "单选题", "多选题"],
      //倒计时
      m: "00",
      s: "00",
      //判断选定
      radio:[],
      //单选选定值
      radioValue: [],
      //多选选定值
      multipleValue: [],
      //试题分类
      paperSort:{
        singleChoice:[],//单选
        multipleChoice:[],//多选
        judgment:[],//判断
        //已答的题和对应所答的答案
        answered:[
          
        ],
      },
    };
  },

  methods: {
    //通过缓存获取试卷id
    getPaperId() {
      const id = localStorage.getItem("paperId");
      console.log(id);
      //开始倒计时
      this.countdown();
      //获取分类
      this.getQuestionNumber();
    },
    //倒计时
    countdown() {
      const differ = this.paperDetails.examTime;

      //奇怪了，乘1000就不会动了，不乘就行了
      let m = parseInt((differ / 60) % 60);
      let s = parseInt(differ % 60);

      this.m = m > 9 ? m : "0" + m;
      this.s = s > 9 ? s : "0" + s;

      const that = this;
      this.paperDetails.examTime -= 1;
      if (m >= 0 && s >= 0) {
        if (m == 0 && s == 0) {
          return;
        }
        setTimeout(function () {
          that.countdown();
        }, 1000);
      }
    },
    //
  getQuestionNumber(){
    this.questions.forEach((item,index) =>{
      //遍历并添加题号，存入对应的题型数组里
        if(item.type === 0){
          this.paperSort.judgment.push(index+1)
        }
        if(item.type == 1){
          this.paperSort.singleChoice.push(index+1)
        }
        if(item.type == 2){
          this.paperSort.multipleChoice.push(index+1)
        }
      })
      // console.log(this.paperSort.judgment)
  },
  //渲染tag颜色，根据
  tagType(item){
    const answeredAndNumber = JSON.stringify(this.paperSort.answered)
    console.log("answeredAndNumber:  "+answeredAndNumber)
    console.log("itemsssss: "+item)
    this.paperSort.answered.forEach((item,index) => {
      console.log("answered数组 item:"+item)
      console.log("answered数组 index:"+index)
    })
    // for(let i = 0; i< answeredNumber.length; i++){
      if(answeredAndNumber){
        return 'success'
      }
      if(!answeredAndNumber){
        return 'info'
      }
  },
  //已答
  handSave(itemOptions, answer){
    console.log("已答题号："+itemOptions)
    console.log("所选答案: " +answer)
    const answeredAndNumber = this.paperSort.answered
    for (let i = 0; i < answeredAndNumber.length; i++) {
      if(answeredAndNumber[i].key == itemOptions){
        console.log("它的键： "+answeredAndNumber[i].key)
        answeredAndNumber[i].value = answer
      }
    }
    this.paperSort.answered.push("questionNum:"+itemOptions,"answer:"+answer)
    console.log("已回答的列表: "+answeredAndNumber)
  }

  },
  created() {
    this.getPaperId();
  },
};
</script>

<style lang="less">
.header_col {
  // margin-top: 30px;
  padding-top: 20px;
  margin: auto;
}
.el-icon-timer {
  font-size: 22px;
}
.box_card {
  margin-top: 30px;
  margin-left: 30px;
  // width: 480px;
}
.box_card_exam {
  margin-top: 30px;
  margin-left: 30px;
  // width: 100vh;
}
.card_title {
  background-color: antiquewhite;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.card_tag {
  margin: 0px 10px;
}
</style>